<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加服务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/area.js"></script>
    <style>
        .content{font-size: 14px;}
        .content ul{}
        .content ul li{position: relative;line-height: 30px;padding: 10px;overflow: hidden;}
        .content ul li .left{float: left;color: #FFC10C;width: 25%;box-sizing: border-box;border-right: 1px solid #ededed;}
        .content ul li .left span{display: block;width: 100%;text-align: justify;}
        .content ul li .right{float: right;color: #333;width: 75%;}
        .content ul li .choose{position: relative;}
        .content ul li .choose select{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .choose span{float: right;color: #666;}
        .content ul .price{overflow: hidden;padding-left: 10px;}
        .content ul .price label{float: left;width: 60%;}
        .content ul .price span{float: right;width: 40%;text-align: right;}
        .content ul li .right .sex{padding-left: 3%;}
        .content ul li .right .sex span{display: inline-block;background-color: #EFEFEF;width: 30%;
            text-align: center;font-size: 14px;line-height: 24px;}
        .content ul li .right .type{width: 50px;float: right;border: none;outline: none;font-size: 13px;line-height: 24px;background-color: #EFEFEF;}

        .content ul li .right .area{padding-left: 3%;}
        .content ul li .right .area select{width: 30%;font-size: 13px;line-height: 24px;border: none;background-color: #EFEFEF;}
        .content .detail{padding:10px;position: relative;}
        .content .detail .title{display: block;color: #FFC10C;margin-bottom: 5px;width: 25%;text-align: justify;}
        .content .detail textarea{width: 100%;height: 100px;color: #333;margin-top: 5px;font-size: 14px;padding: 10px 0;}

        .aui-switch{float: right;margin-right: 5px;}
        .aui-switch:after{content: '公开'}
        .pos{}
        .pos .left{line-height: 100px;}
        .pos .right{}
        .pos .right .poster{width: 100px;height: 100px;background-image: url("../img/QQ截图20160617175225.png");margin-left: 10px;position: relative;
            overflow: hidden;background-size: cover;background-position: center;}
        .pos .right .poster input{position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;}

        .content .photo{padding: 10px;overflow: hidden;}
        .content .photo p{float: left;position: relative;}
        .content .photo p input{position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;opacity: 0;}
        .content .photo p i{color: #FFC10C;font-size: 22px;}
        .content .photo div{float: left;width: 100px;height: 100px;margin-left: 15px;background-size: cover;background-position: center;}

        .footer{height: 50px;}
        .footer .footer-fixed{position: fixed;z-index: 999;left: 0;bottom: 0;width: 100%;height: 50px;}
        .footer .footer-fixed button{display: block;-webkit-appearance: none;background-color: #ffc10c;
            width: 100%;height: 50px;border: none;outline: none;color: #fff;word-spacing: 5px;font-size: 18px;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">添加服务</div>
        <div class="right">
            <a href="">
                <i class="iconfont icon-wenhao"></i>
            </a>
        </div>
    </div>
</header>
<div class="content">
    <ul>
        <!--<li class="bottom-line pos">-->
            <!--<div class="left">-->
                <!--<span class="name">封面</span>-->
            <!--</div>-->
            <!--<div class="right">-->
                <!--<div class="poster">-->
                    <!--<input id="poster" type="file" accept="image/png,image/jpg,image/jpeg"/>-->
                <!--</div>-->
            <!--</div>-->
        <!--</li>-->
        <li class="bottom-line">
            <div class="left">
                <span class="name">类目</span>
            </div>
            <div class="right choose">
                <select>
                    <option>模特</option>
                    <option>丽人</option>
                    <option>摄影</option>
                    <option>设计</option>
                    <option>生活服务</option>
                    <option>语言练习</option>
                    <option>专业咨询</option>
                    <option>影视表演</option>
                </select>
                <span>请选择<i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>

        <li class="bottom-line">
            <div class="left">
                <span class="name">服务内容</span>
            </div>
            <div class="right price">
                <label>
                    <input type="text" placeholder="请输入" maxlength="8"/>
                </label>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">价格</span>
            </div>
            <div class="right price">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <!--<span>元/小时</span>-->
                <select class="type">
                    <option value="">元/小时</option>
                    <option value="">元/日</option>
                </select>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">性别要求</span>
            </div>
            <div class="right">
                <div class="sex">
                    <span class="man">男</span>
                    <span class="women">女</span>
                    <span class="any">不限</span>
                </div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">地区</span>
            </div>
            <div class="right">
                <label class="area">
                    <select id="s_province" class="prov">
                        <option value="0">选择省份</option>
                    </select>
                    <select id="s_city" class="city">
                        <option value="0">选择城市</option>
                    </select>
                    <select id="s_county" class="district">
                        <option value="0">选择地区</option>
                    </select>
                </label>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">身高</span>
            </div>
            <div class="right price">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <span>CM</span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">体重</span>
            </div>
            <div class="right price">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <span>kg</span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">联系电话</span>
            </div>
            <div class="right price">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <input class="aui-switch aui-switch2 aui-con1" type="checkbox"/>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">微信</span>
            </div>
            <div class="right price">
                <label>
                    <input type="text" placeholder="请输入" maxlength="5"/>
                </label>
                <input class="aui-switch aui-switch2 aui-con1" type="checkbox"/>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">QQ</span>
            </div>
            <div class="right price">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <input class="aui-switch aui-switch2 aui-con1" type="checkbox"/>
            </div>
        </li>
    </ul>
    <div class="detail bottom-line">
        <div class="title">内容详情</div>
        <label class="textarea">
            <textarea placeholder="请输入详情"></textarea>
        </label>
    </div>
    <!--<div class="photo">-->
        <!--<p>-->
            <!--<i class="iconfont icon-camera"></i>-->
            <!--<input id="file" type="file" accept="image/jpg,image/png,image/jpeg"/>-->
        <!--</p>-->
        <!--<div class="img"></div>-->
    <!--</div>-->
</div>
<footer class="footer">
    <div class="footer-fixed">
        <button type="submit">确认发布</button>
    </div>
</footer>
</body>
<script>
    _init_area();
    $('.sex span').click(function(){
        $(this).css('background-color','#FFC10C').siblings().css('background-color','');
    });
    $('.type span').click(function(){
        $(this).css('background-color','#FFC10C').siblings().css('background-color','');
    })
</script>
<script>
    function upload1(){
        var file = document.getElementById('poster');
        file.addEventListener('change',function(){
            var fileType = file.value;
            var obj = document.getElementsByClassName('poster')[0];
            if(fileType.length > 1 && fileType ) {
                var ldot = fileType.lastIndexOf(".");
                var type = fileType.substring(ldot + 1);
//过滤其它格式的文件
                if(type == "jpg" || type == "png" || type == "jpeg"){
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(e) {
                        var imgUrl = e.target.result;
                        obj.style.backgroundImage = ('url("'+imgUrl+'")');
                    };
                }else{
//清空选择的非法文件
                    file.value = "";
                    obj.style.backgroundImage = ('url("")');
                    setTimeout(function(){
                        alert("请上传图片类型为 jpg、png、jpeg的图片！")
                    },500);
                }
            }else{
                var isSelect = document.getElementById("file").value;
                if(isSelect == "" || isSelect == null){
                    obj.style.backgroundImage = ('url("")');
                }
            }
        })
    }
    function upload2(){
        var file = document.getElementById('file');
        file.addEventListener('change',function(){
            var fileType = file.value;
            var obj = document.getElementsByClassName('img')[0];
            obj.innerHTML = '加载中...';
            if(fileType.length > 1 && fileType ) {
                var ldot = fileType.lastIndexOf(".");
                var type = fileType.substring(ldot + 1);
//过滤其它格式的文件
                if(type == "jpg" || type == "png" || type == "jpeg"){
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(e) {
                        var imgUrl = e.target.result;
                        obj.style.backgroundImage = ('url("'+imgUrl+'")');
                        obj.innerHTML = '';
                    };
                }else{
//清空选择的非法文件
                    file.value = "";
                    obj.style.backgroundImage = ('url("")');
                    obj.innerHTML = '';
                    setTimeout(function(){
                        alert("请上传图片类型为 jpg、png、jpeg的图片！")
                    },500);
                }
            }else{
                var isSelect = document.getElementById("file").value;
                if(isSelect == "" || isSelect == null){
                    obj.style.backgroundImage = ('url("")');
                    obj.innerHTML = '';
                }
            }
        })
    }
    $(function(){
        upload1();
        upload2()
    })
</script>
</html>